<template>
	<view class="paper-list m-f-ac animate__animated animate__fadeIn animate__faster" @tap="openDetail">
		<image class="list-img" :src="item.userpic" mode="widthFix" lazy-load></image>
		<view class="list-t">
			<view class="m-f-jsb">{{item.username}}<view class="t-r-time">{{item.time}}</view>
			</view>
			<view class="m-f-jsb list-info">
				<view class="info-text">{{item.data}}</view>
				<template v-if="item.noreadnum > 0">
					<uni-badge :text="item.noreadnum" type="error"></uni-badge>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import uniBadge from '../../components/uni-badge/uni-badge.vue'
	export default {
		props: {
			item: {
				type: Object
			}
		},
		components: {
			uniBadge,
		},
		methods: {
			openDetail() {
				uni.navigateTo({
					url: '../../pages/user-chat/user-chat'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.paper-list {
	border-bottom: 1rpx solid #EEEEEE;
	padding: 20rpx 0;
	.list-img {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
		border-radius: 50%;
		flex-shrink: 0;
	}
	.list-t {
		flex: 1;
		.m-f-jsb {
			color: #333333;
			font-size: 38rpx;
			.t-r-time {
				font-size: 26rpx;
				color: #a1a1a1;
			}
		}
		.list-info {
			.info-text {
				color: #797979;
				flex: 1;
				font-size: 34rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>
